<template>
    <div class="recommend-card">
        <div class="card" v-for='(item,index) in content' :key="index">
            <div class="goods-img">
                <img :src="item['image_url']" alt="">
            </div>
            <div class="goods-message" >
                <p class="goods-name">{{item.name}}</p>
                <p class="goods-name">{{item.content}}</p>
                <div class="label-box">
                    <div class="label">
                        <span>{{item.category_name}}</span>
                    </div> 
                </div>
                
                <div class="price">
                    <p class="integral-credits">
                        <span>{{item.integral}}</span>积分
                    </p>
                </div>
                <div class="btn-group">
                    <div class="buy-btn" @click="toProductDetail(item.id)">
                        <span>立即换购</span>
                    </div>
                    <div class="sell-num">
                        已兑换<span>{{item.sales_volume}}</span>件
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'recommendCard',
    props:['content'],
    methods:{
        toProductDetail(id){
            this.$router.push({path:'/product', query:{id:id}});
        }
    },
    mounted(){
        console.log(this.content);
        this.transferUrl(this.content);
    }
}
</script>

<style lang='less'>
@rem:100rem;

.recommend-card{
    .card{
        width: 100%;
        height: 300/@rem;
        background: #fff;
        display: flex;
        align-items: center;
        margin-bottom: 3/@rem;
        .goods-img{
            width: 250/@rem;
            height: 250/@rem;
            border-radius: 20/@rem;
            overflow: hidden;
            margin-left: 20/@rem;
            img{
                width: 250/@rem;
                height: 250/@rem;
            }
        }
        .goods-message{
            width: 294/@rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 40/@rem;
            .goods-name{
                width: 100%;
                font-size: 28/@rem;
                text-align: start;
                margin-bottom: 20/@rem;
            }
            .label-box{
                width: 100%;
                margin-bottom: 30/@rem;
                display: flex;
                flex-wrap: wrap;   
            }
            .label{
                height: 30/@rem;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                line-height: 30/@rem;
                text-align: center;
                border-radius: 6/@rem;
                margin: 0 5/@rem;
                padding: 0 6/@rem;
                background-image: linear-gradient(110deg, 
                #f92ce5 0%, 
                #fc6946 30%, 
                #fc332c 100%), 
                linear-gradient(
                    #5b5b5b, 
                    #5b5b5b);
                background-blend-mode: normal, normal;
                span{
                    font-size: 20/@rem;
                    color: #fff;
                }
            }
            .price{
                display: flex;
                align-items: flex-end;
                width: 100%;
                margin-bottom: 20/@rem;
                .integral-credits{
                    font-size: 18/@rem;
                    color: #5b5b5b;
                }
                .now{
                    font-size: 20/@rem;
                    color: #ff2b48;
                    margin: 0;
                    span{
                        font-size: 30/@rem;
                    }
                }
                .old-price{
                    font-size: 18/@rem;
                    color: #5b5b5b;
                    text-decoration: line-through;
                    margin-left: 16/@rem;
                }
                .integral{
                    font-size: 26/@rem;
                    color: #ff2b48;
                }
            }
            .btn-group{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .buy-btn{
                    width: 136/@rem;
                    height: 40/@rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #6699ff;
                    border-radius: 6/@rem;
                    color: #fff;
                    font-size: 22/@rem;
                }
                .buy-btn:active{
                    background: #4a85fb;
                }
                .sell-num{
                    font-size: 18/@rem;
                    color: #5b5b5b;
                }
            }
        }
    }
}
</style>
